@R04       : 0.4rem;
@R03       : 0.3rem;
@R02       : 0.2rem;
@box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);

input,
button,
a,
p,
i {
    -webkit-tap-highlight-color: transparent;
}

header {
    width                  : 100%;
    height                 : 2rem;
    box-shadow             : @box-shadow;
    position               : fixed;
    top                    : 0;
    z-index                : 95;
    backdrop-filter        : blur(0.8rem);
    -webkit-backdrop-filter: blur(0.8rem);

    i {
        height    : 1.5rem;
        width     : 1.5rem;
        position  : absolute;
        margin    : 0.25rem;
        text-align: center;
    }

    #myinfo {
        left: 0;

        img {
            width        : 1.4rem;
            height       : 1.4rem;
            border-radius: 0.75rem;
            border       : 1px solid #919191;
            margin       : 0.05rem;
        }
    }

    p {
        position      : absolute;
        left          : 50%;
        transform     : translateX(-50%);
        font-size     : 0.8rem;
        font-weight   : 600;
        line-height   : 2rem;
        letter-spacing: 0.02rem;
    }
}

//菜单选项
#menu {
    z-index                : 99;
    position               : fixed;
    width                  : 100%;
    height                 : 2rem;
    line-height            : 2rem;
    bottom                 : 0;
    left                   : 0;
    box-shadow             : @box-shadow;
    backdrop-filter        : blur(0.8rem);
    -webkit-backdrop-filter: blur(0.8rem);
    display                : flex;
    flex-direction         : row;
    justify-content        : center;
    text-align             : center;

    button[type=button] {
        width          : 2rem;
        height         : 2rem;
        margin         : 0 0.5rem;
        background     : none;
        border         : none;
        display        : flex;
        flex-direction : column;
        justify-content: center;
        padding        : 0.1rem 0;

        p {
            width     : 100%;
            text-align: center;

        }

        .optiontitle {
            letter-spacing: 0.03rem;
            font-size     : 0.55rem;
            font-weight   : 500;
        }

        p.fa {
            font-size  : 1rem;
            flex-grow  : 1;
            padding-top: 0.1rem;
        }
    }
}

//个人面板-----------------------------------------
#myinfobox {
    display      : none;
    top          : 50%;
    left         : 50%;
    transform    : translate(-50%, -50%);
    position     : absolute;
    width        : 12rem;
    height       : 20rem;
    box-shadow   : @box-shadow;
    border-radius: @R04;
    text-align   : center;
    z-index      : 99;

    form {
        background    : rgba(0, 0, 0, 0) !important;
        display       : flex;
        flex-direction: column;
    }

    //编辑头像
    #myimg {
        position     : relative;
        border-radius: 50%;
        border       : 0.01rem solid #919191;
        margin       : 0.5rem 2.5rem;
        width        : 7rem;
        height       : 7rem;
        margin-top   : 1rem;
        overflow     : hidden;
    }

    #editor,
    img {
        position: absolute;
        width   : 100%;
        height  : 100%;
    }

    img {
        left   : 0;
        z-index: 0;
    }

    #editor {
        z-index: 98;
        display: none;

        input[type='file'] {
            position : absolute;
            left     : 50%;
            transform: translateX(-50%);
            bottom   : 0;
            z-index  : 98;
            opacity  : 0;
            width    : 100%;
            height   : 20%;
            display  : inline-block;
        }

        #filemask {
            position        : absolute;
            background-color: rgba(0, 0, 0, 0.5);
            width           : 100%;
            height          : 20%;
            bottom          : 0;
            font-size       : 0.65rem;
            z-index         : 97;
            opacity         : 0.7;

            p {
                color: #fff;
            }
        }
    }


    p {
        margin-top: 0.2rem;
    }

    #id {
        width         : 80%;
        margin        : 0rem 10% 0.5rem 10%;
        padding       : 0.05rem 0;
        font-size     : 1rem;
        font-weight   : 500;
        letter-spacing: 0.08rem;
        text-align    : center;
        border-radius : @R04;
        background    : none;
        border        : 0.01rem solid;
        border-color  : rgba(0, 0, 0, 0);
    }

    .mySlogan {
        font-size     : 0.7rem;
        text-align    : center;
        padding       : 0.15rem 0;
        width         : 80%;
        letter-spacing: 0.02rem;
        resize        : none;
        border-radius : @R04;
        background    : none;
        border        : 0.01rem solid;
        border-color  : rgba(0, 0, 0, 0);
        margin        : 0.1rem 10% 0.1rem 10%;
    }

    input[type=button] {
        position     : relative;
        float        : left;
        height       : 1.5rem;
        font-size    : 0.7rem;
        text-align   : center;
        border-radius: 0.75rem;
        border       : none;
        box-shadow   : @box-shadow;
        width        : 60%;
        margin       : 0.1rem 20% 0.5rem 20%;
        opacity      : 0.7;
    }

    #infomodify {
        background: #FFF !important;
        margin-top: 1rem;
    }

    #infoclose {
        color: #fff;
    }

    input[type=button]:active {
        opacity: 1;
    }
}

#myinfomask {
    z-index                : 97;
    position               : absolute;
    display                : none;
    top                    : 0;
    left                   : 0;
    width                  : 100%;
    height                 : 100%;
    backdrop-filter        : blur(3px);
    -webkit-backdrop-filter: blur(3rem);
}

//友链操作提示
#prompt {
    display      : none;
    position     : absolute;
    top          : 1.5rem;
    transform    : translateX(-50%);
    left         : 50%;
    padding      : 0 0.8rem;
    height       : 1.6rem;
    line-height  : 1.6rem;
    box-shadow   : @box-shadow;
    border-radius: 0.8rem;
    z-index      : 98;

    p {
        white-space   : nowrap;
        font-size     : 0.7rem;
        letter-spacing: 0.02rem;
        text-align    : center;
    }
}

//主页面板--------------------------------
#adminpage {
    height: 100%;
    width : 100%;
    top   : 0;
    left  : 0;

    // overflow: hidden;
    #homepage {
        height     : 100%;
        min-height : 10rem;
        width      : 100%;
        left       : 50%;
        padding-top: 2rem;
        z-index    : 0;

        #dynamic,
        #friendstate {
            width   : 100%;
            height  : 100%;
            float   : left;
            position: relative;
        }

        #load_prompt {
            display                : none;
            position               : fixed;
            top                    : 0;
            left                   : 0;
            width                  : 100%;
            height                 : 100%;
            text-align             : center;
            line-height            : 4rem;
            border-radius          : @R03;
            z-index                : 99;
            backdrop-filter        : blur(0.1rem);
            -webkit-backdrop-filter: blur(0.1rem);

            div {
                position      : fixed;
                top           : 45%;
                left          : 50%;
                width         : 50%;
                height        : 4.4rem;
                line-height   : 4.4rem;
                font-size     : 0.9rem;
                font-weight   : 500;
                letter-spacing: 0.02rem;
                border-radius : @R03;
                box-shadow    : @box-shadow;
                padding       : 0 0.5rem;
                transform     : translate(-50%, -50%);
            }
        }

        //页面通用配置
        #dynamic,
        #music {
            width   : 100%;
            height  : 100%;
            position: absolute;
            top     : 0;
            display : none;
        }

        #release,
        #manage {
            position      : absolute;
            width         : 100%;
            min-height    : 100%;
            top           : 0;
            display       : flex;
            flex-direction: column;
            box-sizing    : border-box;
            align-content : flex-end;
        }

        #releaseOption,
        #manageOption {
            position               : fixed;
            width                  : 100%;
            height                 : 2rem;
            line-height            : 2rem;
            bottom                 : 0;
            left                   : 0;
            box-shadow             : @box-shadow;
            backdrop-filter        : blur(0.8rem);
            -webkit-backdrop-filter: blur(0.8rem);
            z-index                : 99;
        }

        #giveupBtn,
        #backBtn,
        #addBtn,
        #releaseBtn {
            position      : relative;
            font-size     : 0.65rem;
            font-weight   : 500;
            letter-spacing: 0.02rem;
            width         : 20%;
            height        : 100%;
            background    : none;
            border        : none;
            text-align    : center;
        }

        #backBtn,
        #giveupBtn {
            float: left;
        }

        #addBtn,
        #releaseBtn {
            float: right;
        }

        p.title {
            position  : absolute;
            left      : 50%;
            transform : translateX(-50%);
            font-size : 0.65rem;
            opacity   : 0.7;
            text-align: center;
        }

        //音乐管理
        #music {
            #manage {
                padding: 2rem 0 2rem 0;

                #musiclist {
                    flex-grow: 1;
                    overflow : auto;
                    position : relative;

                    #scrolllist {
                        position: absolute;
                        padding : 0 0.5rem;
                        width   : 100%;

                        li {
                            width  : 100%;
                            height : 2.2rem;
                            padding: 0.25rem 0;
                            display: flex;

                            .songmsg {
                                display       : flex;
                                flex-direction: column;
                                flex-grow     : 1;
                                position      : relative;

                                .songname {
                                    flex-grow     : 1;
                                    font-size     : 0.7rem;
                                    line-height   : 1rem;
                                    font-weight   : 500;
                                    letter-spacing: 0.05rem;
                                }

                                .songduration {
                                    font-size     : 0.55rem;
                                    letter-spacing: 0.05rem;
                                    padding-left: 0.1rem;
                                }
                            }

                            .controls {
                                display: flex;

                                button {
                                    flex-grow : 1;
                                    width     : 1.5rem;
                                    border    : none;
                                    background: none;
                                    position  : relative;

                                    p.fa-play {
                                        transform  : translate(-50%, -50%);
                                        position   : absolute;
                                        top        : 50%;
                                        left       : 50%;
                                        font-size  : 0.7rem;
                                        font-weight: 500;
                                    }

                                    p.fa-plus {
                                        font-size  : 1rem;
                                        transform  : translate(-50%, -50%) rotate(45deg);
                                        top        : 50%;
                                        left       : 50%;
                                        font-weight: 400;
                                        position   : absolute;
                                    }

                                    p.fa-exclamation {
                                        font-size  : 0.8rem;
                                        transform  : translate(-50%, -50%);
                                        top        : 50%;
                                        left       : 50%;
                                        position   : absolute;
                                        color: red !important;
                                    }
                                }
                            }
                        }
                    }
                }

                #urltext {
                    display       : flex;
                    flex-direction: row;
                    padding       : 0 0.5rem 0.5rem 0.5rem;

                    #musicUrl,
                    #clearUrl {
                        height    : 1.3rem;
                        box-shadow: @box-shadow;
                    }

                    #musicUrl {

                        border-radius: @R03 0 0 @R03;
                        border       : none;
                        padding      : 0 0.5rem;
                        line-height  : 1.2rem;
                        font-size    : 16px;
                        flex-grow    : 1;
                    }

                    #clearUrl {
                        border-top   : none;
                        border-right : none;
                        border-bottom: none;
                        border-left  : 0.02rem solid rgba(0, 0, 0, 0.1);

                        border-radius: 0 @R03 @R03 0;
                        width        : 1.8rem;
                        text-align   : center;
                        position     : relative;
                        font-size    : 1rem;
                        padding-right: 0.3rem;

                        p,
                        .fa-backspace:before {
                            position : absolute;
                            top      : 50%;
                            left     : 50%;
                            transform: translate(-50%, -50%);
                        }
                    }
                }
            }
        }


        //动态发布
        #dynamic {
            #release {
                padding: 2.5rem 0 2rem 0;

                #dynamictext {
                    border       : none;
                    padding      : 0.3rem;
                    font-size    : 16px;
                    line-height  : 0.8rem;
                    resize       : none;
                    flex-grow    : 1;
                    margin       : 0 0.5rem;
                    border-radius: @R03;
                    box-shadow   : @box-shadow;
                    flex-grow    : 1;
                    min-height   : 8rem;
                }

                #imgArray {
                    width         : 100%;
                    left          : 0;
                    display       : flex;
                    flex-direction: row;
                    flex          : 0 0 33.3333%;
                    flex-wrap     : wrap;
                    padding       : 0.25rem;

                    #img_upload {
                        order: 99;

                        #uploadmask,
                        #upload {
                            width   : 100%;
                            height  : 100%;
                            position: absolute;
                            padding : 0.25rem;
                            overflow: hidden;
                        }

                        #mask {
                            width        : 100%;
                            height       : 100%;
                            border-radius: @R03;
                            box-shadow   : @box-shadow;
                            opacity      : 0.9;
                        }

                        #upload {
                            opacity: 0;
                            z-index: 98;
                        }

                        #wordstext {
                            font-size: 1.4rem;
                            opacity  : 0.7;
                            position : absolute;
                            top      : 50%;
                            left     : 50%;
                            transform: translate(-50%, -50%);
                        }
                    }

                    .imgbox {
                        .delBtn {
                            position     : absolute;
                            right        : 0;
                            top          : 0;
                            margin       : 0.25rem;
                            z-index      : 98;
                            border       : none;
                            width        : 20%;
                            height       : 20%;
                            border-radius: 0 @R03 0 @R03;
                            text-align   : center;
                            background   : rgba(0, 0, 0, 0.7);
                            opacity      : 0.7;

                            i {
                                width      : 0.8rem;
                                height     : 0.8rem;
                                text-align : center;
                                transform  : translate(-50%, -50%) rotate(45deg);
                                font-size  : 0.8rem;
                                position   : absolute;
                                color      : #FFF;
                                top        : 50%;
                                left       : 50%;
                                font-weight: 300;
                            }
                        }
                    }

                    .imgbox,
                    #img_upload {
                        position      : relative;
                        padding-bottom: 33.3333%;
                        width         : 33.3333%;

                        .img {
                            width   : 100%;
                            height  : 100%;
                            position: absolute;
                            padding : 0.25rem;
                            overflow: hidden;

                            img {
                                border-radius: @R03;
                                width        : 100%;
                                height       : 100%;
                                object-fit   : cover;
                            }
                        }
                    }
                }
            }
        }

        //友链管理
        #friendstate {
            #state_0 {
                display: none;
            }

            .state {
                width   : 100%;
                padding : 0.5rem;
                position: relative;
                float   : left;
            }

            .classification {
                padding      : 0.2rem 0.5rem;
                font-size    : 0.7rem;
                font-weight  : 500;
                text-align   : center;
                width        : 100%;
                box-shadow   : @box-shadow;
                border-radius: @R04;
                position     : relative;
            }

            .modecard {
                width        : 100%;
                box-shadow   : @box-shadow;
                border-radius: @R04;
                padding      : 0.3rem;
                position     : relative;
                margin-top   : 0.5rem;
                float        : left;

                .friendlogo {
                    width        : 2.6rem;
                    height       : 2.6rem;
                    border-radius: @R03;
                    float        : left;
                    margin-right : 0.5rem;
                }

                .info {
                    display       : flex;
                    flex-direction: column;

                    .friendID {
                        flex-direction: row;
                        font-size     : 0.8rem;
                        font-weight   : 500;
                        letter-spacing: 0.03rem;
                        line-height   : 0.8rem;
                        float         : left;
                    }

                    .friendslogan {
                        word-break    : keep-all;
                        word-wrap     : normal;
                        flex-direction: row;
                        margin-top    : 0.2rem;
                        font-size     : 0.6rem;
                        font-weight   : 400;
                        letter-spacing: 0.01rem;
                        line-height   : 0.8rem;
                        height        : 1.6rem;
                        float         : left;
                    }
                }

                .statecontrols {
                    width     : 100%;
                    height    : 1.2rem;
                    margin-top: 0.3rem;
                    float     : left;

                    .priority {
                        height     : 100%;
                        float      : left;
                        line-height: 1.2rem;

                        p,
                        input {
                            float: left;
                        }

                        p {
                            font-size     : 0.7rem;
                            letter-spacing: 0.03rem;
                            margin-right  : 0.2rem;
                            font-weight   : 500;
                        }

                        input {
                            display         : inline-block;
                            width           : 1.4rem;
                            height          : 1rem;
                            margin-top      : 0.1rem;
                            font-size       : 0.65rem;
                            font-weight     : 500;
                            text-align      : center;
                            border          : none;
                            border-radius   : @R02;
                            box-shadow      : @box-shadow;
                            background-color: rgba(255, 255, 255, 0.7);
                            color           : rgba(0, 0, 0, 0.7);
                        }
                    }

                    .decision {
                        float      : right;
                        margin-left: 1rem;

                        input[type=button] {
                            width                : 2.5rem;
                            height               : 1.2rem;
                            text-align           : center;
                            line-height          : 1.2rem;
                            border-radius        : 0.6rem;
                            -webkit-border-radius: 0.6rem;
                            font-size            : 0.65rem;
                            float                : left;
                            letter-spacing       : 0.03rem;
                            box-shadow           : @box-shadow;
                            font-weight          : 500;
                            border               : none;
                        }

                        .rejected {
                            background: #FFF;
                            opacity   : 0.7;
                        }

                        .agree {
                            margin-left: 0.4rem;
                            color      : #FFF;
                            opacity    : 0.7;
                        }
                    }
                }
            }
        }
    }
}